/* Begin Harmony Header CSS code */
/* Designed by Widhi Allan */
/* Created by Widhi Allan */
/* Generated with Adobe Dreamweaver CC */
/* Encoding UTF-8 */
/* Version 1.2.0 rev2 */
/* Date revision 01/24/2014 07:32PM */

.header-section {
	height:390px;
	width:1024px;
	background:transparent;
	margin: 15px auto;
}

.nav-sec {
	width:1024px;
	height:70px;
	background:#b3c833 url(kompon/menu_background.svg) no-repeat right;
	border-radius:1px;
	moz-border-radius:1px;
	webkit-border-radius:1px;
	overflow:hidden;
}

.logo {
	width:192px;
	height:70px;
	background:#4A9ECC;
	position:relative;
}

.logo:after {
	content:"";
	border-left:15px solid #4A9ECC;
	border-top:35px solid transparent;
	border-right:35px solid transparent;
	border-bottom:35px solid transparent;
	position:absolute;
}

#menubar {
  width:700px;
  list-style-type:none;
  padding:0;
  margin:0 0 0 200px;
  overflow:hidden;
  position:absolute;
  float:left;
}

#menubar li {
	float:right;
}

#menubar a:link,
#menubar a:visited {
  display:block;
  font-family:'Yanone Kaffeesatz';
  font-weight:300;
  font-size:32px;
  color:#FFFFFF;
  padding:16px 35px;
  margin:0;
  text-decoration:none;
}

#menubar a:hover {
    color:#3c3c3c;
	background:#c2c2c2;
}

#menubar a:active {
	background:#000;
}

.head-content {
	height:320px;
	width:1024px;
}

/* GooglePlay menu Mod */
/* Created specially for Onextrapixel */
/* http://www.onextrapixel.com */
/* Free for use */
/* further development or integration in your personal or commercial projects. */
/* Credit or reference back to us is greatly appreciated. */
/* Please do not redistribute, republish, host or sell the work. */
/* Please contact us if you have any other queries. */
/* For more information, visit: http://www.onextrapixel.com/terms-of-use/ */
/* Edited by Widhi Allan */


nav.navigation {
  background: #f5f5f5;
  width: 192px;
  color: #555;
  position: absolute;
  min-height: 100px;
  -moz-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  -ms-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  font-family:'Yanone Kaffeesatz';
  font-weight:300;
  font-size:26px;
}

nav.navigation > a, nav.navigation .second_level a{
	display: table;
	width: 100%;
	height: 40px;
	color: #555;
	text-decoration: none;
	font-weight: 300;
	font-size: 18px;
	font-weight: 300;
	position: relative;
}

nav.navigation > a > .icon {
  display: table-cell;
  vertical-align: middle;
  width: 51px;
}

nav.navigation > a > .icon > i {
  margin: 0 11px;
  line-height: 100%;
  font-size: 21px;
  position: relative;
  top: 2px;
}

nav.navigation > a > .content {
  text-align: left;
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
  background: #f5f5f5;
}

nav.navigation > a.active {
  top: 0;
  position: absolute;
}

nav.navigation > a.home, nav.navigation > a.home .content {
  background: #444;
  color: white;
}

nav.navigation > a.home.active {
  background: #444;
  color: white;
}

nav.navigation > a.home.active > .content {
  background: #444;
}

nav.navigation > a.green .icon{
  background: #b3c833;
  color: white;
}

nav.navigation > a.green:hover > .content, nav.navigation > a.green.active > .content, nav.navigation > a.green.hover > .content {
  background: #b3c833;
  color: white;
}

nav.navigation > a.red .icon{
  background: #ce5043;
  color: white;
}

nav.navigation > a.red:hover > .content, nav.navigation > a.red.active > .content, nav.navigation > a.red.hover > .content {
  background: #ce5043;
  color: white;
}

nav.navigation > a.orange .icon{
  background: #fb8521;
  color: white;
}

nav.navigation > a.orange:hover > .content, nav.navigation > a.orange.active > .content , nav.navigation > a.orange.hover > .content {
  background: #fb8521;
  color: white;
}

nav.navigation > a.blue .icon{
  background: #1aa1e1;
  color: white;
}

nav.navigation > a.blue:hover > .content, nav.navigation > a.blue.active > .content, nav.navigation > a.blue.hover > .content{
  background: #1aa1e1;
  color: white;
}

nav.navigation > a.purple .icon{
  background: #5e5ca6;
  color: white;
}

nav.navigation > a.purple:hover > .content, nav.navigation > a.purple.active > .content, nav.navigation > a.purple.hover > .content  {
  background: #5e5ca6;
  color: white;
}

nav.navigation > a.grey .icon{
  background: #658092;
  color: white;
}

nav.navigation > a.grey:hover > .content, nav.navigation > a.grey.active > .content, nav.navigation > a.grey.hover > .content {
  background: #658092;
  color: white;
}

nav.navigation .second_level {
  display: none;
}

nav.navigation .second_level a {
  height: auto;
  line-height: 20px;
  padding: 8px 0 8px 10px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

nav.navigation .second_level a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

nav.navigation .second_level > .back {
  height: 100%;
  display: table-cell;
  padding: 0 3px;
  background: #FFF;
  vertical-align: middle;
  font-size: 13px;
  width: 5px;
}

nav.navigation .second_level > .content {
  padding: 6px 0;
  text-align: left;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  background: #f5f5f5;
}

.cover {
	width:832px;
	height:320px;
	overflow:hidden;
	left:192px;
	display:inline-block;
	position:relative;
}